<template>
<div>
  <button @click="isShow = !isShow">显示/隐藏</button>
  <transition-group name="jojo" appear>
    <h1 v-show="isShow" key="1">你好啊!!!</h1>
    <h1 v-show="!isShow" key="2">大笨蛋</h1>
  </transition-group>
</div>
</template>

<script>
export default {
  name: "MyTransitionGroup",
  data() {
    return {
      isShow: true
    }
  }
}
</script>

<style scoped>
h1{
  background-color: orange;
}

.jojo-enter,.jojo-leave-to{
  transform: translateX(-100%);
}

.jojo-enter-to,.jojo-leave{
  transform: translateX(0);
}

.jojo-enter-active,.jojo-leave-active{
  transition: 0.5s linear;
}
</style>
